<template>
  <!-- 变更审批 -->
  <div v-loading="loading">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :data-callback="dataCallback"
      row-key="eno"
      :tool-button="false"
      height="350"
    >
    </ProTable>
  </div>
</template>

<script setup lang="ts" name="ApprovalBox">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "@/components/ProTable/interface";
import { findAllApporveComment } from "@/api/modules/changeManagement";

const props = defineProps({
  eno: String
});

// ProTable 实例
const proTable = ref<ProTableInstance>();

const loading = ref(false);

// 如果你想在请求之前对当前请求参数做一些操作
const getTableList = (params: any) => {
  loading.value = true;
  let page = params.pageNum;
  return findAllApporveComment({
    "acDTO.eno": props.eno,
    page: page,
    rows: params.pageSize
  }).catch(() => {
    loading.value = false;
  });
};

// dataCallback 是对于返回的表格数据做处理
const dataCallback = (data: any) => {
  loading.value = false;
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};

// 表格配置项
const columns = reactive([
  { prop: "eno", label: "ID", width: 100 },
  { prop: "etitle", label: "审批成员" },
  { prop: "etitle", label: "意见" },
  { prop: "createdByName", label: "审批结果" },
  { prop: "createdByName", label: "时间" }
]);
</script>

<style lang="scss" scoped>
:deep(.card) {
  padding: 0;
  border: none;
}
</style>
